import * as echarts from "echarts";
function echartsFunctio() {
  /*echart_1();*/
  // 车辆状态
  echart_2();
  // 抓拍车辆
  echart_3();
  // 停留时长
  echarts_1();
  // 中间底部
  echarts_4();
  //右侧车辆类型
  echarts_2();
  //车辆总数
  char4();
  // echart_4();
}

function echarts_1() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("echarts_1"));

  var data = [
    { value: 12, name: "<=1h" },
    { value: 13, name: "1h~6h" },
    { value: 70, name: "6h~12h" },
    { value: 52, name: "12h~24h" },
    { value: 10, name: ">=24h" },
  ];

  var option = {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      trigger: "item",
      formatter: "{b}: <br/>{c}辆 占据{d}%",
    },
    color: ["#af89d6", "#4ac7f5", "#0089ff", "#f36f8a", "#f5c847"],
    legend: {
      //图例组件，颜色和名字
      x: "70%",
      y: "24%",
      orient: "vertical",
      itemGap: 12, //图例每项之间的间隔
      itemWidth: 10,
      itemHeight: 10,
      icon: "rect",
      data: ["<=1h", "1h~6h", "6h~12h", "12h~24h", ">=24h"],
      textStyle: {
        color: [],
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "行业占比",
        type: "pie",
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ["35%", "55%"], //饼图的中心（圆心）坐标
        radius: [55, 80], //饼图的半径
        avoidLabelOverlap: true, ////是否启用防止标签重叠
        itemStyle: {
          //图形样式
          normal: {
            borderColor: "#1e2239",
            borderWidth: 2,
          },
        },
        label: {
          //标签的位置
          normal: {
            show: true,
            position: "inside", //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        data: data,
      },
      {
        name: "",
        type: "pie",
        clockwise: false,
        silent: true,
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ["35%", "55%"], //饼图的中心（圆心）坐标
        radius: [0, 45], //饼图的半径
        itemStyle: {
          //图形样式
          normal: {
            borderColor: "#1e2239",
            borderWidth: 1.5,
            opacity: 0.21,
          },
        },
        label: {
          //标签的位置
          normal: {
            show: false,
          },
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
//echart_1
function echart_1() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("chart_1"));

  var data = [
    { value: 335, name: "客运车" },
    { value: 335, name: "危险品运输车" },
    { value: 315, name: "网约车" },
    { value: 200, name: "学生班车" },
  ];

  var option = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    color: ["#0035f9", "#f36f8a", "#ffff43", "#25f3e6"],
    legend: {
      //图例组件，颜色和名字
      left: "65%",
      top: "95",
      orient: "vertical",
      itemGap: 12, //图例每项之间的间隔
      itemWidth: 16,
      itemHeight: 12,

      icon: "rect",
      data: ["客运车", "危险品运输车", "网约车", "学生班车"],
      textStyle: {
        color: [],
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "车辆类型",
        type: "pie",
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ["35%", "50%"], //饼图的中心（圆心）坐标
        radius: [50, 80], //饼图的半径
        avoidLabelOverlap: true, ////是否启用防止标签重叠
        itemStyle: {
          //图形样式
          normal: {
            borderColor: "#1e2239",
            borderWidth: 1.5,
          },
        },

        label: {
          //标签的位置
          normal: {
            show: false,
            position: "inside", //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        data: data,
      },
      {
        name: "",
        type: "pie",
        clockwise: false,
        silent: true,
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ["35%", "50%"], //饼图的中心（圆心）坐标
        radius: [0, 45], //饼图的半径
        itemStyle: {
          //图形样式
          normal: {
            borderColor: "#1e2239",
            borderWidth: 1.5,
            opacity: 0.21,
          },
        },
        label: {
          //标签的位置
          normal: {
            show: false,
          },
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

//echart_2
function echart_2() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("chart_2"));

  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },

    legend: {
      // align: 'center',
      // left: '65%',
      top: "28",
      data: ["行驶", "停车", "熄火", "离线"],
      itemWidth: 16,
      itemHeight: 12,
      // borderRadius: 0, // 统一设置四个角的圆角大小
      icon: "rect",
      textStyle: {
        itemGap: 12, //图例每项之间的间隔
        color: [],
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 14,
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },

    xAxis: {
      axisLabel: {
        //调整x轴的lable
        textStyle: {
          color: "#fff",
          fontSize: 13,
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: ["轿车", "客运车", "卡车", "运输车"],
      axisTick: { show: true },
      axisLabel: {
        //调整x轴的lable
        textStyle: {
          color: "#fff",
          fontSize: 13,
        },
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: "行驶",
        type: "bar",
        stack: "总量",
        color: "#0035f9",
        barWidth: 18,
        label: {
          normal: {
            show: false,
            position: "insideRight",
          },
        },
        data: [4, 10, 8, 7],
      },
      {
        name: "停车",
        type: "bar",
        stack: "总量",
        color: "#f36f8a",
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: "insideRight",
          },
        },
        data: [10, 4, 5, 6],
      },
      {
        name: "熄火",
        type: "bar",
        stack: "总量",
        color: "#efe39b",
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: "insideRight",
          },
        },
        data: [4, 10, 8, 7],
      },
      {
        name: "离线",
        type: "bar",
        stack: "总量",
        color: "#25f3e6",
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: "insideRight",
          },
        },
        data: [4, 10, 8, 7],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function echarts_2() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("echarts_2"));

  var option = {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      trigger: "item",
      formatter: "{b}  <br/>{c}辆",
    },
    legend: {
      x: "center",
      y: "2%",
      data: ["轿车", "客运车", "卡车", "运输车", "其他"],
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    calculable: true,
    series: [
      {
        name: "车型",
        type: "pie",
        //起始角度，支持范围[0, 360]
        startAngle: 0,
        //饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: [31, 90],
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ["50%", "30%"],
        //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 面积展现数据的百分比，半径展现数据的大小。
        //  'area' 所有扇区面积相同，仅通过半径展现数据大小
        roseType: "area",
        //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            formatter: "{c}辆",
          },
          emphasis: {
            show: true,
          },
        },
        labelLine: {
          normal: {
            show: true,
            length2: 1,
          },
          emphasis: {
            show: true,
          },
        },
        data: [
          {
            value: 2900,
            name: "轿车",
            itemStyle: {
              normal: {
                color: "#f845f1",
              },
            },
          },
          {
            value: 1200,
            name: "客运车",
            itemStyle: {
              normal: {
                color: "#ad46f3",
              },
            },
          },
          {
            value: 300,
            name: "卡车",
            itemStyle: {
              normal: {
                color: "#5045f6",
              },
            },
          },
          {
            value: 200,
            name: "运输车",
            itemStyle: {
              normal: {
                color: "#4777f5",
              },
            },
          },
          {
            value: 1000,
            name: "其他",
            itemStyle: {
              normal: {
                color: "#44aff0",
              },
            },
          },

          {
            value: 0,
            name: "",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          {
            value: 0,
            name: "",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          {
            value: 0,
            name: "",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          {
            value: 0,
            name: "",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          {
            value: 0,
            name: "",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
//echart_3
function echart_3() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("chart_3"));
  var xAxisData = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
  ];
  var legendData = ["", "", ""];
  var title = "";
  var serieData = [];
  var metaDate = [
    [
      120, 140, 100, 120, 300, 230, 130, 170, 140, 120, 300, 230, 120, 140, 100,
      120, 300, 230, 130, 170, 140, 120, 300, 230,
    ],
  ];
  for (var v = 0; v < legendData.length; v++) {
    var serie = {
      name: legendData[v],
      type: "line",
      symbol: "circle",
      symbolSize: 10,
      data: metaDate[v],
    };
    serieData.push(serie);
  }
  var colors = ["#ffff43"];
  var option = {
    backgroundColor: "transparent",
    title: {
      text: title,
      textAlign: "left",
      textStyle: { color: "#fff", fontSize: "16", fontWeight: "normal" },
    },

    color: colors,
    grid: {
      left: "4%",
      top: "30%",
      bottom: "5%",
      right: "4%",
      containLabel: true,
    },
    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
    xAxis: [
      {
        type: "category",
        axisLine: { show: true, lineStyle: { color: "#2c3459" } },
        axisLabel: { interval: 0, textStyle: { color: "#fff", fontSize: 12 } },
        axisTick: { show: false },
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { textStyle: { color: "#fff", fontSize: 12 } },
        axisLine: { show: true, lineStyle: { color: "#2c3459" } },
      },
    ],
    series: serieData,
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function char4() {
  var myChart = echarts.init(document.getElementById("char4"));

  var option = {
    grid: {
      show: "true",
      borderWidth: "0",
      top: 40,
      bottom: 30,
      left: 65,
      right: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },

      formatter: function (params) {
        var tar = params[0];
        return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
      },
    },

    xAxis: [
      {
        type: "category",
        splitLine: { show: false },
        data: ["轿车", "客运车", "卡车", "运输车", "其他"],
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: { show: false },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        name: "数量",
        type: "bar",
        stack: "总量",
        itemStyle: {
          normal: {
            label: { show: true, position: "inside" },
            color: "#44aff0",
          },
        },
        data: [2900, 1200, 300, 200, 1000],
      },
    ],
  };

  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function echart_4() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("char4"));

  /*中间显示的数据*/
  /*中间显示的数据*/
  var myData = ["超速", "SOS", "偏移", "其他"];
  var databeast = {
    1: [38, 25, 26, 32],
  };
  var databeauty = {
    1: [11, 38, 23, 30],
  };
  var timeLineData = [1];

  var option = {
    baseOption: {
      backgroundColor: "transparent",
      timeline: {
        show: false,
        top: 0,
        data: [],
      },
      legend: {
        show: true,
        // align: 'center',
        left: "30%",
        top: 30,
        // data: ['行驶', '停车'],
        // itemWidth:16,
        // itemHeight:12,
        // // borderRadius: 0, // 统一设置四个角的圆角大小
        icon: "rect",
        textStyle: {
          itemGap: 12, //图例每项之间的间隔
          color: [],
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 14,
        },
      },
      tooltip: {
        show: true,
        trigger: "axis",
        formatter: "{b}<br/>{a}: {c}",
        axisPointer: {
          type: "shadow",
        },
      },

      grid: [
        {
          show: false,
          left: "8%",
          top: 60,
          bottom: 0,
          containLabel: true,
          width: "30%",
        },
        {
          show: false,
          left: "57%",
          top: 60,
          bottom: 0,
          width: "0%",
        },
        {
          show: false,
          right: "8%",
          top: 60,
          bottom: 0,
          containLabel: true,
          width: "30%",
        },
      ],

      xAxis: [
        {
          type: "value",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          nameTextStyle: {
            color: "#50afff",
            fontSize: 14,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: "top",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          position: "right",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
        {
          gridIndex: 1,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          data: myData.map(function (value) {
            return {
              value: value,
              textStyle: {
                align: "center",
              },
            };
          }),
        },
        {
          gridIndex: 2,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },
      ],
      series: [],
    },
    options: [],
  };

  option.baseOption.timeline.data.push(timeLineData[0]);
  option.options.push({
    tooltip: {
      trigger: "axis",
      formatter: "{b}<br/>{c} {a}",
    },
    series: [
      {
        name: "昨天",
        type: "bar",
        barWidth: 17,
        label: {
          normal: {
            show: true,
            position: "left",
            offset: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            color: "#0035f9",
            // barBorderRadius: 50
          },
        },

        data: databeast[timeLineData[0]],
      },
      {
        name: "今天",
        type: "bar",
        barWidth: 18,
        xAxisIndex: 2,
        yAxisIndex: 2,
        label: {
          normal: {
            show: true,
            position: "right",
            offset: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            color: "#25f3e6",
            // barBorderRadius: 50
          },
        },
        data: databeauty[timeLineData[0]],
      },
    ],
  });

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function echarts_4() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("echart4"));
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    grid: {
        left: "1%",
        top: "20%",
        bottom: "7%",
        right: "1%",
        containLabel: true,
      },
    legend: {
      data: [{ name: "图例1" }, { name: "图例2" }, { name: "完成率" }],
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,0.9)", //图例文字
      },
    },

    xAxis: [
      {
        type: "category",

        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          textStyle: { color: "rgba(255,255,255,1)", fontSize: "14" },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "金额",
        min: 0,
        max: 50,
        interval: 10,
        axisLabel: {
          show: true,
        },
        axisLine: { lineStyle: { color: "rgba(255,255,67,.8)" } }, //左线色
      },
      {
        type: "value",
        name: "完成率",
        show: true,
        axisLabel: {
          show: true,
        },
        axisLine: { lineStyle: { color: "rgba(255,255,67,.8)" } }, //右线色
        splitLine: { show: true, lineStyle: { color: "#ffffff" } }, //x轴线
      },
    ],
    series: [
      {
        name: "图例1",

        type: "bar",
        data: [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
        barWidth: "auto",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#609db8",
                },

                {
                  offset: 1,
                  color: "#609db8",
                },
              ],
              globalCoord: false,
            },
          },
        },
      },
      {
        name: "图例2",
        type: "bar",
        data: [4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18],
        barWidth: "auto",

        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#66b8a7",
                },
                {
                  offset: 1,
                  color: "#66b8a7",
                },
              ],
              globalCoord: false,
            },
          },
        },
        barGap: "0",
      },
      {
        name: "完成率",
        type: "line",
        yAxisIndex: 1,

        data: [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        itemStyle: {
          normal: {
            color: "#cdba00",
          },
        },
        smooth: true,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

export { echartsFunctio };
